<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>办件进度查询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body,html{background-color: #fff;}
			.mui-icon-back:before, .mui-icon-left-nav:before{float:left;margin-top:-.09rem;}
			.mui-content{position:absolute;top:0;left:0;/*height:100%;*/background:url(../../images/jindu/jindu_bg.png)  no-repeat;background-size:100% auto;overflow:hidden;}
		    .mui-action-back{color:#fff;font-size:14px;margin:.35rem 0 0 .35rem;}
		    .jindu_content{width:7.2rem;background:#fff;border-radius:.1rem;overflow:hidden;margin:0 auto 0 auto;padding:0;box-sizing:border-box;}
	        .jindu_title{margin:3.3rem auto .28rem auto;font-size:.28rem;color:#fff;line-height:.4rem;width:6.5rem;overflow:hidden;}
		    .jindu_title>.blue{color:#f6ff00;margin:0 .03rem;}
		     .form_cont{width:6.8rem;float:left;margin:0 .22rem;}
			.form_cont .form_cont_list{width:6.75rem;float:left;border:1px solid #eee;border-radius:.08rem;height:.85rem;margin-bottom:.33rem;position:relative;}
			.form_cont .form_cont_list>.dian{width:.11rem;height:.11rem;float:left;border-radius:50%;margin:.38rem 0 0 .3rem;background:#ff2222;}
			.form_cont .form_cont_list>.form_control{width:5.05rem;float:left;padding-left:.2rem;box-sizing:border-box;color:#666;font-size:.3rem;border:none;height:.85rem;background:transparent;}
			.form_cont .form_cont_list>.mui-icon-arrowdown{position:absolute;top:.23rem;right:.4rem;font-size:.4rem;color:#222;}
			input[placeholder], [placeholder], *[placeholder] {color:#c7c7cd !important;}
			.form_cont .mui-btn-primary{width:6.8rem;height:.85rem;background:#1653fc;color:#fff;border-radius:.1rem;overflow:hidden;margin:.6rem 0 .23rem 0;float:left;font-size:.32rem;border: none;}
		    .form_cont .form_cont_list>.bg_blue{background:#1653fc;}
		    .form_cont .form_cont_list>.bg_orange{background:#ff9c00;}
		    .code{color:#1653fc;font-size:.3rem;position:absolute;top:.21rem;right:.15rem;}
		    .exp{width:100%;float:left;margin:0;color:#999;font-size:.28rem;}
		    .exp>img{width:.3rem;float:left;margin-right:.15rem;margin-top:.05rem;}
		    .form_cont .mui-btn-gray{background:#eee url(../../images/jindu/scan.png) no-repeat;background-size:.35rem auto;background-position:1.8rem .22rem;border:1px solid #cccccc;color:#666666;margin:0;box-sizing:border-box;}
		    .line_cont{width:4.9rem;margin:1.8rem auto .7rem 1.1rem;position:relative;float:left;border-top:1px solid #a9a9a9;height:.3rem;}
		    .line_cont>span{width:1.8rem;background:#fff;position:absolute;line-height:.33rem;text-align:center;color:#999;font-size:.28rem;top:-.2rem;left:1.5rem;}
		    /*切换菜单*/
		   .mui-segmented-control{margin-bottom:.5rem;height:.8rem;border:none;border-bottom:1px solid #eee;border-radius:0;}
		   .mui-segmented-control .menu_list{width:50%;float:left;}
		   .mui-segmented-control .menu_list .mui-control-item{border:none;background:#fff;color:#666;font-size:.32rem;border-radius:0;width:2rem;margin:0 .8rem;float:left;height:.8rem;line-height:.8rem;margin-top:.2rem}
		   .mui-segmented-control .menu_list .mui-active{color:#1653fc;border-bottom:2px solid #1653fc;}
		</style>
	</head>
	<body>
		<div class="mui-content" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h5 class="jindu_title">您可以凭办件编号查询办事的进度，如果您已有注册账号可<a class="blue" onclick="showLogin(false);">登录</a>后直接进入用户中心查看办件</h5>
			<div class="jindu_content">
				<div class="mui-slider">
					<!--切换菜单-->
					<div id="segmentedControl" class="mui-segmented-control">
						<div class="menu_list">
							<a class="mui-control-item mui-active" href="#item1">
							 办件编号查询
						   </a>
						</div>
						<div  class="menu_list">
							<a class="mui-control-item" href="#item2">
							手机号码查询
							</a>
						</div>
					</div>
				
					<div class="content">
						<!--办件编号查询-->
						<div id="item1" class="mui-control-content mui-active">
							<form class="form_cont">
								<a class="form_cont_list" ">
									<i class="dian bg_blue"></i>
									<input type="text" id='caseNum' class="form_control" placeholder="请输入办件编号"/>
								</a>
								<p class="exp"><img src="../../images/jindu/wrong.png">办件告知单下方的办件编号</p>
								<input type="button" class="mui-btn mui-btn-primary ripple" id="item1_search" value="搜 索"/>
								<input type="button" id='scan_icon' class="mui-btn mui-btn-primary mui-btn-gray ripple" value="扫描二维码查询"/>
						   </form>
						</div>
						<div id="item2" class="mui-control-content">
							<form class="form_cont">
								<a class="form_cont_list" ">
									<i class="dian bg_blue"></i>
									<input type="text" id='phone' class="form_control" placeholder="请输入手机号码"/>
									<span class="code code01">获取验证码</span>
									<span class="code code02 hide">60s</span>
								</a>
								<a class="form_cont_list">
									<i class="dian bg_orange"></i>
									<input type="text" class="form_control" id='msgCode' placeholder="请输入验证码">
								</a>
								<p class="exp"><img src="../../images/jindu/wrong.png">手机号码必须和办件所留号码一致</p>
								<input type="button" class="mui-btn mui-btn-primary ripple" id='item2_search' value="搜 索"/>
								<input type="button" id='scan_icon2' class="mui-btn mui-btn-primary mui-btn-gray ripple" value="扫描二维码查询"/>
						   </form>
						</div>
					</div>
				</div>
				<div class="line_cont"><span>让办事更简单</span></div>
			</div>
		</div>
		<script>
			function my_immersed(immersed){
				document.getElementById("header").style.paddingTop = immersed + 'px';
			}
		</script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/app.js"></script>
		<script>
			mui.init();
			mui.plusReady(function(){
				closeWaitingAndShowView(); 
			});
			
		    //二维码扫描
			document.getElementById("scan_icon").addEventListener('tap',function () {
				openNewWin('../global/barcode_scan.html');
			});
			
			 //二维码扫描
			document.getElementById("scan_icon2").addEventListener('tap',function () {
				openNewWin('../global/barcode_scan.html');
			});
			
		    //办件编号查询
		    document.getElementById("item1_search").addEventListener('tap',function () {
			    	var caseNum = $('#caseNum').val();
			    	if(caseNum == '' || caseNum == null){
			    		mui.toast('请输入办件编号');
			    		return;
			    	}
			    	var param = 'caseNum=' + caseNum;
				utils.ajax('appHttpService/checkZwfwCaseByCaseNum.do', function(data) {
					data = JSON.parse(data);
					if(data.code == '1'){
						mui.toast('办件信息不存在');
						return;
					}else{
						utils.showWaiting();
						openNewWin('_www/src/work/bjjdcx_info.html?caseNum=' + caseNum);
					}
				}, param);
			});
			
			var checkCode = '';//手机短信验证码
			
			//手机号码+验证码查询
		    document.getElementById("item2_search").addEventListener('tap',function () {
			    	var phone = $('#phone').val();//手机号码
			    	var msgCode = $('#msgCode').val();//短信验证码
			    	
			    	if(phone == '' || phone == null){ 
			    		mui.toast('请输入手机号码');
			    		return;
			    	}
		    		var phoneFlag = isMoible(phone);
				if(!phoneFlag){
					mui.toast('请输入正确的手机号码');
					return;
				}
				
				if(msgCode== '' || msgCode == null){
					mui.toast('请输入验证码');
					return;
				}
				if (msgCode != checkCode) {
					mui.toast('输入的验证码不正确');
					return;
				}
			    	var param = 'phone=' + phone;
				utils.ajax('appHttpService/checkZwfwCaseByPhone.do', function(data) {
					data = JSON.parse(data);
					if(data.code == '1'){
						mui.toast('未查询到该手机号相关的办件信息');
						return;
					}else{
						showTemplates('bjjdcx_list.html','办件列表','_www/src/work/bjjdcx_list.html?phone=' + phone);
					}
				}, param);
			});
			
			 //倒计时
		    $('.code01').click(function(){
		    	var phone = $('#phone').val();
		    	if(phone == '' || phone == null){ 
		    		mui.toast('请输入手机号码');
		    		return;
		    	}
		    	var phoneFlag = isMoible(phone);
				if(!phoneFlag){
					mui.toast('请输入正确的手机号码');
					return;
				}
				
			    var j = $(this);
			    j.hide();
			    $('.code02').show();
			    var t = 60;
			    function countDown(){
				   t--;
				   if(t > 0){
					   $('.code02').text(t + 's');
					   setTimeout(countDown,1000);
				   }else{
				   	   checkCode ='';//代表验证码
					   $('.code02').hide();
					   $('.code02').text('60s');
					   j.show();
				   }
			    }
			    //发送验证码
				utils.ajax('appHttpService/appSendPhone.do',function(data){
					var data = JSON.parse(data);
					if(data.code == '0') {//成功
						mui.toast('验证码已发送, 请注意查收！');
						checkCode = data.result;
						if(data.zdht != undefined && data.zdht == '0'){
							$('#msgCode').val(data.result);
						}
					} else {
						mui.toast(data.result);
					}
				},"netUserPhone="+phone,null,function(){
					mui.toast('抱歉，当前服务不可用，请稍后再试！');
				});
			    setTimeout(countDown,1000);
		    });
			
		</script>
	</body>
</html>
